<template>
  <div class="TableClass">
    <a-table
      :columns="columnsData"
      :data="tableData"
      :loading="loading"
      :pagination="false"
      :scroll="scroll"
      :row-selection="computedRowSelection"
      :scrollbar="scrollbar"
      v-bind="$attrs"
      :bordered="{ headerCell: isHeaderCell, bodyCell: isBodyCell }"
      v-model:selectedKeys="selectedKeys"
      :row-key="rowKey"
      @select="selectRow"
      @select-all="selectAllRow"
    >
      <template
        v-for="(item, key, i) in slots"
        :key="i"
        v-slot:[key]="{ record, rowIndex, column }"
      >
        <slot :name="key" v-bind="{ rowIndex: rowIndex, record: record, column: column }"></slot>
      </template>

    <template #empty>
      <div class="empty">
        <img
           alt=""
            src="@/assets/images/table_empty.png"
        />
      </div>
    </template>

      <template #operator="{ record }">
        <a-space size="small">
          <div v-if="operatorBeforeArrs && operatorBeforeArrs.length == 0">
            <a-link
              v-for="(item, idx) in operatorBeforeArrs"
              :key="idx"
              :type="item.type || 'primary'"
              @click="handlerOperator(record, item)"
              >{{ item.label }}</a-link
            >
          </div>
          <div v-else>
            <a-space size="small">
              <a-link
                v-for="(item, idx) in operatorBeforeArrs"
                :key="idx"
                :type="item.type || 'primary'"
                @click="handlerOperator(record, item)"
                >{{ item.label }}</a-link
              >
              <a-dropdown trigger="hover">
                <a-link type="primary">{{ operatorMore.label }}</a-link>
                <template #content>
                  <a-link
                    v-for="(item, idx) in operatorAfterArrs"
                    :key="idx"
                    :type="item.type || 'primary'"
                    @click="handlerOperator(record, item)"
                    >{{ item.label }}</a-link
                  >
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </a-space>
      </template>
    </a-table>
    <a-pagination
      class="PaginationClass"
      v-show="showPagination"
      :total="pageTotal"
      :simple="isSimple"
      :page-size-options="pageSizeOptions"
      :show-total="!isSimple"
      :show-page-size="!isSimple"
      :show-jumper="!isSimple"
      @change="handlerPaginationChange('num', $event)"
      @page-size-change="handlerPaginationChange('size', $event)"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs, ref, onMounted, type PropType } from 'vue';
import { defineProps, defineEmits, useSlots } from 'vue';

const props = defineProps({
  //表格数据
  tableData: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: true
  },
  //表格头部数据
  columnsData: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: true
  },
  //是否显示分页信息
  showPagination: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  //操作按钮
  operatorData: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: false
  },
  //表格滚动
  scroll: {
    type: Object,
    default: () => ({ x: '100%', y: '100%' })
  },
  //开启滚动
  scrollbar: {
    type: Boolean,
    default: false
  },
  //按钮折叠数量
  operatorCollapse: {
    type: Number,
    default: 3
  },
  //分页大小
  pageTotal: {
    type: Number,
    default: 0
  },
  pageSizeOptions: {
    type: Array as PropType<string[]>,
    default: () => [10, 20]
  },
  //是否开启行选择器
  isSelecteRow: {
    type: Boolean,
    default: false
  },
  //多选的数据集合
  selectedData: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  //当前行的标识
  rowKey:{
    type: String,
    default: 'id'
  },
  //是否开启分页简介模式(卡片分页)
  isSimple: {
    type: Boolean,
    default: false
  },
  //是否开启头部边框
  isHeaderCell: {
    type: Boolean,
    default: false
  },
  //是否开启内容边框
  isBodyCell: {
    type: Boolean,
    default: false
  },
  //是否开启加载
  loading: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits([
  'handlerOperator',
  'handlerPaginationChange',
  'handlerSelectAllRow',
  'handlerSelectRow'
]);

const computedRowSelection = computed(() => {
  return props.isSelecteRow ? rowSelection.value : null;
});
let { selectedData } = toRefs(props);

//获取父亲组件传递过来的插槽 特殊处理数据
const slots = useSlots();

const rowSelection = ref({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});
const selectedKeys = ref(selectedData);

//控制按钮数量显示
const operatorBeforeArrs = ref([] as any);
const operatorAfterArrs = ref([] as any);
const operatorMore = ref([] as any);
const operatorData = ref(props.operatorData);
const operatorDataLength = operatorData.value.length;
if (operatorDataLength > props.operatorCollapse) {
  operatorBeforeArrs.value = operatorData.value.slice(0, 3);
  operatorMore.value = { label: '更多...', code: 'more' };
  operatorAfterArrs.value = operatorData.value.slice(3);
} else {
  operatorBeforeArrs.value = operatorData.value;
}

/**
 *
 * @method handlerOperator 所有的操作按钮
 * @param record 当前行的数据
 * @param item 当前操作按钮的数据
 */
function handlerOperator(record: any, item: any) {
  emits('handlerOperator', record, item);
}
/**
 *
 * @method handlerPaginationChange 分页信息
 * @param type 当前操作按钮的数据
 * @param value 当前操作按钮的数据
 */
function handlerPaginationChange(type: string, value: any) {
  emits('handlerPaginationChange', type, value);
}

/**
 *
 * @method selectRow 选择单行数据
 * @param selectedRowsIDs 选择的ID集合
 * @param selectedRowKeys 选择的行的key
 *
 */
const selectRow = (selectedRowsIDs: Array, selectedRowKeys: any) => {
  emits('handlerSelectRow', selectedRowsIDs, selectedRowKeys);
};

/**
 *
 * @method selectAllRow 选择所有行数据
 * @param checked 设置全选状态
 *
 */
const selectAllRow = (checked: boolean) => {
  emits('handlerSelectAllRow', checked);
};

//更改分页的文字信息
onMounted(() => {
  if (!props.isSimple){
    const pageJumpDemo = document.getElementsByClassName('arco-pagination-jumper');
    if (pageJumpDemo[0]) {
      pageJumpDemo[0].firstChild.innerHTML = '跳至';
      const newSpan = document.createElement('span');
      newSpan.innerHTML = '页';
      newSpan.style.marginLeft = '3px';
      pageJumpDemo[0].append(newSpan);
    }
  }

});
</script>

<style lang="less" scoped>
.TableClass {
  // display: flex;
  // flex-direction: column;
  // align-items: flex-end;
}
:deep(.arco-table-element) {
  thead {
    .arco-table-tr {
      .arco-table-th {
        background: @base-color-bg-1 !important;
        color: @base-color-1 !important;
        font-size: 14px !important;
        font-weight: 400;
      }
    }
  }
  tbody {
    .arco-table-tr {
      .arco-table-td {
        //background: #EBF0FA !important;
        font-size: 14px !important;
        font-weight: 400;
        color: @base-color-1-text !important;
      }
    }
  }
}

.PaginationClass {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
//分页信息
:deep(.arco-select-view-single) {
  background: #ffffff;
  border: 1px solid @base-color-border;
  border-radius: 4px;
}
:deep(.arco-select-view-value) {
  color: @base-color-1-text;
}
//总条数信息
:deep(.arco-pagination-total) {
  color: @base-color-1-text-1;
}
:deep(.arco-pagination-jumper .arco-pagination-jumper-input) {
  background: #ffff;
  border: 1px solid @base-color-border;
  box-sizing: border-box;
  border-radius: 4px;
}
:deep(.arco-pagination-jumper) {
  color: @base-color-1-text-1;
}
.empty{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
